<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="row">654</div>
    <button class="btn">点击</button>
</body>
<script>
    var arr = [
        { name: "zxy", age: 20, gender: "男" },
        { name: "xhx", age: 18, gender: "男" },
        { name: "xt", age: 16, gender: "女" },
        { name: "zxy1", age: 19, gender: "男" },
    ]
    // 从arr中筛选出age>=18 并且 gender为男的 
    // 对age从小到大排序
    var mySortArr = arr.filter(item=>item.age>=18&&item.gender==='男').sort(function(a,b){
        return a.age-b.age
    })
    console.log(mySortArr)

    var btn = document.querySelector('.btn')
    var ele = document.querySelector('.row')
    var i=0
    // 为btn绑定点击事件
    btn.onclick = function(){
        i++
        //点击后将ele的宽度和高度设为100px
        ele.style.width = '100px';
        ele.style.height= '100px';
        // 轮换更换颜色
        if(i===1){
            ele.style.backgroundColor='red'
        }else if(i===2){
            ele.style.backgroundColor='blue'
        }else if(i===3){
            ele.style.backgroundColor='green'
            i=0
        }
    }
</script>

</html>